<template>
	<div class="dashboard-editor-container">
		<div class="back">
		</div>
		<div class="info">
			<div class="left">
				<div class="list-img" style="margin-top:42px;">
					<div class="img" style="border-radius: 50%; overflow: hidden; width: 98px; height: 98px;
          box-shadow:rgb(247 247 252 / 50%) 0px 1px 10px 4px, rgb(238 240 244 / 0%) 0px 0px 6px
          ">
						<img :src="imgNameData" style="width: 98px; height: 98px;">
					</div>

					<div class="list-warrp" style="
          display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
          ">
						<p style="text-align: center; color:#FFFFFF;margin-top:1rem;font-size:1.4rem">
            
							{{userxx.nickName}}
              <img
                src="@/assets/info/编辑@2x.png"
                style="
                  width: 15px;
                  height: 15px;
                  margin-left: 5px;
                  margin-right: 25px;
                "
              />
						</p>
						<p style="text-align: center;color:#FFFFFF;margin-top:15px;font-size:1.2rem">
              <img
                src="@/assets/info/手机@2x.png"
                style="width: 15px; height: 20px; margin: 0px 5px 0px 0px"
              />
							{{userxx.phonenumber}}
							
						</p>
					</div>
					<div class="button" style="margin-top: 50px ;">
						<input class="b1" type="button" name="" id="" value="编辑" @click="editButton" style="background: #FFFFFF;height:35px;width:75px;
box-shadow: 0px 3px 15px 0px rgba(0, 96, 133, 0.57);border:none;color:#007CAC;font-size:20px;
border-radius: 18px;" />
						<input type="button" name="" id="" value="邀请码" @click="InvitationCodeBoxShow = true" style="background: #FFFFFF;height:35px;width:100px;
box-shadow: 0px 3px 15px 0px rgba(0, 96, 133, 0.57);border:none;color:#007CAC;font-size:20px;
border-radius: 18px;"/>
					</div>
				</div>
				<div class="user-state" style="margin-top: 8rem;">
					<div style="display: flex; align-items: center;font-size:18px">
						实名认证：
						<span @click="RealNameShow" v-if="RealNameData == 1" class="RealName">
							未认证
							<span style="
              display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
              ">
								<img src="@/assets/img/wrz2.png" alt="" style="
					                        height: 17px;
					                        display: flex;
					                        align-items: center;
					                        margin-left: 5px;
					                      " />
							</span>
						</span>
						<span v-else style="
					                    display: flex;
					                    align-items: center;
					                    flex-direction: no-wrap;
					                  ">
							已认证
							<span>
								<img src="@/assets/info/已认证@2x.png" alt="" style="
					                        height: 17px;
					                        display: flex;
					                        align-items: center;
					                        margin-left: 5px;
					                      " />
							</span>
						</span>
					</div>
					<div style="width:165px; margin-top: 8px;font-size:18px">
						所属角色：{{ roleData }}
					</div>
				</div>
				<div class="list-main" style="margin-top: 4rem;">
					<!--二维码-->
					<div v-if="roleData != '平台'" style="display: flex;flex-direction: column;justify-content: center;
					align-items: center;margin-top: 4rem;">
						<!-- <div id="" style="width: 70px;">
							<img src="@/assets/img/bzzx.png" alt="" style="height:70px">
						</div> -->
						<vue-qr v-show="qrcode" :text="qrcode" :margin="0" :size="70" 
            style="
            box-shadow:rgb(72 72 76 / 10%) 0px 1px 10px 4px, rgb(108 110 113 / 10%) 0px 0px 6px"
            ></vue-qr>
						<div style="
					            height: 70px;
					            text-align: center;
					            font-size: 22px;
					            color: black;
                      margin-top:10px;
					          ">
							<!-- {{ Invitation }} -->
							邀请码
						</div>
					</div>
					<!--帮助中心-->
					<div v-if="roleData != '平台'" style="display: flex;
					flex-direction: column;justify-content: center;
					align-items: center;margin-top: 4rem;">
						<div id="" style="width: 75px;border-radius:50%;box-shadow:rgb(72 72 76 / 10%) 0px 1px 10px 4px, rgb(108 110 113 / 10%) 0px 0px 6px">
							<img src="@/assets/img/bzzx.png" alt="" style="height:70px">
						</div>
						<div style="
					            height: 70px;
					            text-align: center;
					            font-size: 22px;
					            color: black;
                      margin-top:10px;
								text-decoration:underline;
								cursor:pointer; 
					          " @click="HelpCenter">
							<!-- {{ Invitation }} -->
							帮助中心
						</div>
					</div>
				</div>
			</div>
			<div class="info-right">
				<div class="info-right-top" style="color:#FFFFFF;">
					<span style="font-size:24px;">欢迎来到{{userData.userName}}后台</span>
					<span style="margin-left: 10%;font-size:24px;">登陆时间:<font style="margin-left:15px">{{LoginTime}}</font></span>
				</div>
				<div class="info-right-main">
					<!-- 资金占比和团队人数 -->

					<div class="info-right-left">
						<div class="info-tu-top" style="box-shadow: rgb(16 62 243 / 10%) 0px 4px 10px 6px, rgb(201 218 255 / 10%) 0px 0px 6px;border-radius:25px;">
							<div class="capital">
								<div id="tatil" style="height: 40px;">
									<h3 style="margin-left: 10px;height:12px">资金占比</h3>
									<div class="tatil-index" style="width: 40%;height: 1px;box-shadow: 0px 0px 6px 0px rgba(173, 173, 173, 0.57)">
									</div>
								</div>
								<div class="capital-center">
									<div id="main" class="tu">

									</div>
									<div class="expenditure">
										<span style="color:#999999 " v-if="roleData == '用户'">总收入</span>
										<span style="color:#999999 " v-else>总支出</span>
                    <!-- {{ CardData.totalIncome || 0 }} -->
										<h2 style="font-size:26px;margin-top:8px">{{ CardData.totalIncome || 0 }}</h2>
									</div>
								</div>
								<div class="capital-bottom">
									<div class="capital-bottombox"
                  style="margin-left:15px"
										@click="changeChart(0)">
										<div class="box-top">
                    <!-- <img src="" /> -->
											<img src="@/assets/info/形状99@2x.png" style="width: 20px;height: 20px;">
										</div>
										<div class="box-main">
											<div class="box-main-left" style="margin-right:5px">
												<img src="@/assets/info/组 51@2x.png" style="width: 25px;height: 25px;">
											</div>
											<div class="box-main-right">
												<p style="color:rgb(182 173 173);font-size:16px">佣金</p>
												<p style="color:#0AA349">{{ CardData.totalCommission || 0}}元</p>
											</div>
										</div>
									</div>
                  <div style="width:1px;height:70px;border-right:1px solid #EEEEEE;"></div>
                  <div class="capital-bottombox"
										@click="changeChart(1)">
										<div class="box-top">
                    <!-- <img src="" /> -->
										<img src="@/assets/info/形状 44 拷贝@2x.png" style="width: 16px;height: 16px;">
										</div>
										<div class="box-main">
											<div class="box-main-left"style="margin-right:5px">
												<img src="@/assets/info/组 55@2x.png" style="width: 25px;height: 25px;">
											</div>
											<div class="box-main-right">
												<p style="color:rgb(182 173 173);font-size:16px">分成</p>
												<p style="color:#FF5800">{{ CardData.totalProfit || 0}}元</p>

											</div>
										</div>
									</div>
                  <div style="width:1px;height:70px;border-right:1px solid #EEEEEE;"></div>
                  <div class="capital-bottombox"
										@click="changeChart(2)">
										<div class="box-top">
                    <!-- <img src="" /> -->
											<img src="@/assets/info/形状 44 拷贝@2x.png" style="width: 16px;height: 16px;">
										</div>
										<div class="box-main">
											<div class="box-main-left" style="margin-right:5px">
												<img src="@/assets/info/组 52@2x.png" style="width: 25px;height: 25px;">
											</div>
											<div class="box-main-right">
												<p style="color:rgb(182 173 173);font-size:16px">其他</p>
												<p style="color:#FE4471" >{{ CardData.totalOther || 0}}元</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="team">
								<div class="team-main">
									<div id="tatil" style="height: 40px;margin-left: 20px;">
										<h3 style="margin-left: 20px;height:12px">团队人数</h3>
										<div class="tatil-index" style="width: 40%;height: 1px;box-shadow: 0px 0px 6px 0px rgba(173, 173, 173, 0.57)">

										</div>
									</div>
									<div class="warrp">
										<div class="warrp-span">
											<span style="font-size:26px; color:#FF5879">
												{{ pageData.StraightTeam || 0}}
											</span>
											<span style="color:#B3BAC7">
												直联团队(人)
											</span>
										</div>
										<div class="warrp-span">
											<span style="font-size: 26px;color:#309EFE ">
												{{ pageData.BetweenTeam || 0}}
											</span>
											<span  style="color:#B3BAC7">
												间联团队(人)
											</span>
										</div>
									</div>
									<div class="team-num" style="margin-top: 2rem;">
										<div style="display: flex;align-items: center;justify-content: center;">
											<img src="@/assets/info/总人数@2x.png" style="width: 60px;">
											<span style="margin-left: 1rem;color:#B3BAC7;font-size:18px">总人数：<font style="color:rgba(51, 51, 51, 1)">{{ pageData.teamSum }}</font></span>
										</div>
									</div>
								</div>
							</div>

						</div>
						<div class="info-tu-bottom" style="    box-shadow: rgb(16 62 243 / 10%) 0px 4px 10px 6px, rgb(201 218 255 / 10%) 0px 0px 6px;border-radius:5px;">
							<div id="tatil">
								<h3 style="margin-left: 20px; margin-top: 20px;height:12px">数据展示</h3>
								<div class="tatil-index" style="width: 20%;height: 1px;box-shadow: 0px 0px 6px 0px rgba(173, 173, 173, 0.57) ">
								</div>
							</div>
							<div class="tu-title" style="width: 93%;height: 22%;padding: 20px;margin-top:30px;">
								<div class="tu-title-top" style="text-align: end; height:40px;">
									<span style="font-size: 1rem ;">单位：元</span>
								</div>
								<div class="tu-title-bottom"
									style="height: 40px;display: flex;
                  
                  flex-direction: row;align-items: center;justify-content: space-between;">
									<div>
										<span style="font-size: 1rem ;">2022年度汇总图表一览:</span>
									</div>
									<div
										style="display: flex;flex-direction: row;justify-content: center;align-items: center;">
										<img src="@/assets/info/形状 46@2x.png" style="width: 20px;height: 20px;">
										<span style="font-size: 1rem ; margin: 1rem;">选择时间</span>
										<template>
											<el-select style="width: 100px;" @change="selectchange(value)"
												v-model="value" clearable placeholder="请选择">
												<el-option v-for="item in options" :key="item.value" :label="item.label"
													:value="item.value">
												</el-option>
											</el-select>
										</template>
									</div>
								</div>
							</div>
							<div id="tumain" class="tumain">

							</div>
						</div>
					</div>
					<div class="info-notice" style="box-shadow:rgba(1, 7, 31, 0.12) 0px 4px 4px 4px, rgba(201, 218, 255, 0.1) 0px 0px 6px 6px;border-radius:5px;">
						<div id="tatil" style="height: 40px;">
							<h3 style="margin-left: 20px;margin-top: 20px;height:12px">公告消息</h3>
							<div class="tatil-index" style="width: 28%;height: 1px;">
							</div>
						</div>
						<div class="" style="overflow-y: auto;height: 980px;">
							<div class="noticeitem" v-for="(item,index) in activities" >
									<div class="notice-item">
										<div class="item-left">
											<div class="xiantiao"	:style="{'--color':(index==0)?'1px solid rgba(250, 178, 68, 1)':'1px solid rgba(48, 158, 254, 1)'}">
												<div class="button-notice" :style="{background:(index==0)?'rgb(250 178 68 / 14%)':'rgb(48 158 254 / 19%)'}">
													<span style="font-size:14px;color:#FAB244" v-if="index == 0">新消息</span>
													<span style="font-size:14px;color:rgb(48 158 254)" v-else >已查看</span>
												</div>
												<span style="margin-top:10px;line-height: 14px; font-size:12px;color:rgba(172, 172, 172, 1);width:62px;text-align: end;">
                        {{ item.cTime ||LoginTime }}
                        </span>
												<span style="line-height: 25px;width:62px;text-align: end;color:rgba(51, 51, 51, 1)">
													{{userxx.nickName}}
												</span>
											</div>
										</div>
										<div class="item-right" style="width:55%;padding: 20px 20px 20px 0;">
											<div class="" style="color:rgba(51, 51, 51, 1);font-size:14px">
												{{item.noticeName}}
											</div>
											<div class="" style="padding-top: 10px;color:rgba(153, 153, 153, 1);font-size:12px">
												{{item.text}}
											</div>
										</div>
									</div>
								</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- //二维码弹窗 -->
		<el-dialog title="" :visible.sync="IndirectShow" width="330px">
      <div class="InvitationBox">
        <vue-qr v-show="qrcode" :text="qrcode" :margin="1" :size="250"></vue-qr>
        <div style="width: 70px; text-align: center; font-size: 20px">
          {{ Invitation }}
        </div>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑账户" :visible.sync="editShow" width="30%" :before-close="editFalse">
      <el-form ref="userxx" :model="userxx" :rules="userDatarules" size="medium" label-width="110px">
        <el-form-item label="用户名称" prop="nickName">
          <el-input v-model="userxx.nickName" maxlength="10" placeholder="请输入用户名称" show-word-limit clearable
            :style="{ width: '85%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          {{ userxx.phonenumber }}
          <el-button type="text" @click="editPhonenumber(true)" v-if="!phonenumberCode">修改</el-button>
          <el-button v-else type="text" @click="editPhonenumber(false)">取消修改</el-button>
        </el-form-item>
        <el-form-item label="手机验证码：" prop="code" v-if="phonenumberCode">
          <div class="divFlex">
            <el-input v-model.trim="userxx.code" placeholder="验证码" class="enrollInp" clearable maxlength="10"
              onkeyup="this.value=this.value.replace(/\D/g,'')"></el-input>
            <el-button type="primary" size="mini" :disabled="gain.flag" @click="sendCodeFun('form1')">
              {{ gain.title }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="新手机号码" prop="newPhonenumber" v-if="phonenumberCode">
          <el-input v-model="userxx.newPhonenumber" placeholder="请输入新手机号码" :maxlength="11" show-word-limit clearable
            :disabled="showPhone" :style="{ width: '85%' }"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="editShow = false">取消</el-button>
        <el-button type="primary" @click="editNewPhonenumber">确定</el-button>
      </div>
    </el-dialog>
    <!-- 实名弹窗 -->
    <el-dialog title="实名" :visible.sync="tanShow1" width="30%" center>
      <el-form ref="elForm" :model="formData5" :rules="rules5" size="medium" label-width="110px">
        <el-form-item label="真实姓名" prop="field101">
          <el-input v-model.trim="formData5.field101" placeholder="请输入真实姓名" clearable maxlength="10"
            :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="field102">
          <el-input v-model="formData5.field102" placeholder="请输入身份证号" clearable maxlength="18"
            :style="{ width: '100%' }">
          </el-input>
        </el-form-item>


        <el-form-item label="手机验证码" prop="code">
          <div class="divFlex">
            <el-input v-model.trim="formData5.code" placeholder="验证码" class="enrollInp" clearable maxlength="10"
              onkeyup="this.value=this.value.replace(/\D/g,'')"></el-input>
            <el-button type="primary" size="mini" :disabled="gain.flag" @click="sendCodeFun('form1')">
              {{ gain.title }}
            </el-button>
          </div>
        </el-form-item>




      </el-form>
      <div slot="footer">
        <el-button @click="tanShow1 = false">取消</el-button>
        <el-button type="primary" @click="handelConfirm5">确定</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog :visible.sync="InvitationCodeBoxShow" center :show-close="false">
   
   
    </el-dialog> -->

    <div class="InvitationCodeBox" :modal="true" v-if="InvitationCodeBoxShow">
      <div class="InvitationCodeMiniBox">
        <div class="InvitationCodeBoxImg">
          <vue-qr v-show="qrcode" :text="qrcode" :margin="15" :size="185"></vue-qr>
          <div style="width: 100%; text-align: center; font-size: 20px" class="textBox">
            邀请码：{{ Invitation }}
          </div>
          <div class="InvitationButtonBox">
            <el-button size="mini" class="Button_Box" :disabled="gain.flag" @click="InvitationCodeBoxShow = false">
            </el-button>
          </div>
        </div>
        <!-- XX关闭 -->
        <div class="escInvitationCodeBoxImg" @click="InvitationCodeBoxShow = false">
          <img src="@/assets/img/tcxx.png" alt="" class="imgXX" />
        </div>
      </div>
    </div>

    <!-- 新邀请码弹窗 -->

    <!-- 公告弹窗 -->
    <Dialog ref="mychild" @AddAnnouncement="AddAnnouncement" :uelLocation="uelLocation" />
	</div>
</template>
<script>
// 	import * as echarts from 'echarts'
// 	export default {
// 		data() {
// 			return {
// 				roleData: "",
// 				RealNameData: "",
// 				RealNameShow: '',
// 				e: 75,
// 				tatilcolor: "#0AA349",
// 				options: [{
// 					value: '选项1',
// 					label: '年'
// 				}, {
// 			  value: '选项2',
// 					label: '月'
// 				}, {
// 					value: '选项3',
// 					label: '日'
// 				}],
// 				value: ''
// 			};
// 		},
// 		mounted() {
// 			this.drawCharts();
// 			this.Chart()
// 		},
// 		methods: {
// 			HelpCenter() {

// 			},
// 			selectchange(val) {
// 				console.log(val)
// 			},
// 			async changeChart(val) {
// 				// console.log((val))
// 				if (val === 2) {
// 					this.e = 10,
// 						this.tatilcolor = "#FE4471"
// 				} else if (val === 1) {
// 					this.e = 15,
// 						this.tatilcolor = "#FF5800"
// 				} else {
// 					this.e = 75,
// 						this.tatilcolor = "#0AA349"
// 				}
// 				this.$nextTick(() => {
// 					this.drawCharts();
// 				})
// 			},
// 			drawCharts() {
// 				// 基于准备好的dom，初始化echarts实例
// 				var myChart = echarts.init(document.getElementById("main"));
// 				let e = this.e
// 				let col = this.tatilcolor
// 				var option = {
// 					title: {
// 						show: true,
// 						text: e + "%",
// 						x: "center",
// 						y: "center", // 通过x,y将标题(进度)定位在圆环中心
// 						textStyle: {
// 							fontSize: "25",
// 							color: col,
// 							fontWeight: "400",
// 							fontFamily: "DINPro, DINPro-Regular",
// 						},
// 					},
// 					tooltip: {
// 						trigger: "item",
// 						formatter: "{d}%",
// 						show: false,
// 					},
// 					legend: {
// 						orient: "vertical",
// 						x: "left",
// 						show: false,
// 					},
// 					series: {
// 						name: "",
// 						type: "pie",
// 						radius: ["65%", "85%"],
// 						avoidLabelOverlap: true,
// 						hoverAnimation: false,
// 						label: {
// 							normal: {
// 								show: false,
// 								position: "center",
// 							},
// 							emphasis: {
// 								show: false,
// 							},
// 						},
// 						labelLine: {
// 							normal: {
// 								show: false,
// 							},
// 						},
// 						data: [{
// 								value: e,
// 								name: "",
// 								itemStyle: {
// 									color: col,
// 								},
// 							},
// 							{
// 								value: 100 - e,
// 								name: "",
// 								itemStyle: {
// 									color: "transparent",
// 								},
// 							},
// 						],
// 					},
// 				};
// 				myChart.setOption(option);
// 			},
// 			Chart() {
// 				var chartDom = document.getElementById('tumain');
// 				var myChart = echarts.init(chartDom);
// 				var option2;

// 				option2 = {
// 					xAxis: {
// 						type: 'category',
// 						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// 					},
// 					yAxis: {
// 						type: 'value'
// 					},
// 					tooltip: {
// 						textStyle: {
// 							align: 'left'
// 						},
// 						trigger: 'axis',
// 						// trigger: "item",
// 						// formatter: "",
// 						// show: false,
// 					},
// 					series: [{
// 						data: [820, 932, 901, 934, 1290, 1330, 1320],
// 						type: 'line',
// 						smooth: true
// 					}]
// 				};

// 				myChart.setOption(option2);
// 			}
// 		},
// 	};
// </script>


// <script>
  import Dialog from "@/views/components/Dialog.vue";
  import * as echarts from "echarts";
  import "animate.css";
  import {
    getSetup,
    selectByInvitationCodeIsUserId,
    getMenuList,
    chart,
    selectUserIdByConfig
  } from "@/api/system/index";
  import {
    getInfo,
    getIdentityAndTopId,
    getAliDy
  } from "@/api/login.js";
  import VueQr from "vue-qr";
  import {
    getUserProfile,
    updateUserProfile,
    selectByTeamUserByOne,
    updatePhoneByUserId,
  } from "@/api/system/user";
  import userAvatar from "./system/user/profile/userAvatar";
  import {
    selectByTeamSum,
    updateRUser,
    frontUpdateRUser
  } from "@/api/base/index.js";
  import {
    capUserWalletRecordStatistics,
    capPoolAccountRecordStatistics,
    selectCapUserWalletById,
  } from "@/api/finance/index.js";
  import {
    listAPI
  } from "@/api/projectManagement/index.js";
  export default {
    data() {
      return {
        bgcolor:"#e6f6ec",
		    roleData: "",
				RealNameData: "",
				// RealNameShow: '',
				e: "",
				tatilcolor: "#0AA349",
        // var option2;
				option2:{
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#999999'
            },
          },
					},
					yAxis: {
						type: 'value',
            axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#999999'
            },
            },
            splitLine:{
                //去除网格线
			            // show:false
                  lineStyle:{
                    type:'dashed'
                }
		            }
					},
          // tatilcolor: "#623AFF",
					tooltip: {
						textStyle: {
							align: 'left'
						},
						trigger: 'axis',
						// trigger: "item",
						// formatter: "",
						// show: false,
					},
					series: [{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true,
            // 设置折线上圆点大小
            symbolSize:10,
            // 设置拐点为实心圆
            // symbol:'circle',
            itemStyle:{
              normal:{
                // 拐点上显示数值
                // label : {
                // show: true
                // },
                borderColor:'black',  // 拐点边框颜色
                lineStyle:{ 
                  color:"#623AFF",                
                  width:3.5,  // 设置线宽
                  type:'solid' ,//'dotted'虚线 'solid'实线
                  shadowOffsetX: 0, // 折线的X偏移    
                  shadowOffsetY: 9,// 折线的Y偏移  
                  shadowBlur: 8,  // 折线模糊
                  shadowColor: "rgba(69, 28, 227, 0.57)", //折线颜色
                },
                axisLine: {
                  type: "default",
                  color: "#ffb500",  //背景颜色
                  opacity: 0.3,   //透明度
                  }
              }
            }
					}]
				},
				options: [{
					value: 'YEAR',
					label: '年'
				}, {
			  value: 'MONTH',
					label: '月'
				}, {
					value: 'DAY',
					label: '日'
				}],
				value:"月",
        //头像
        imgNameData: '',
        // option: {
        //   color: ["#538AFF"],
        //   xAxis: {
        //     type: "category",
        //     boundaryGap: false,
        //     // data: ["1", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        //     data: [],
        //   },
        //   yAxis: {
        //     // type: "value",
        //   },
        //   tooltip: {
        //     trigger: "axis",
        //   },
        //   tatilcolor:"#623AFF",
        //   series: [{
        //     // data: [820, 932, 901, 934, 1290, 1330, 1320],
        //     data: [],
        //     type: "line",
        //     areaStyle: {},
        //     smooth: true,
        //   }, ],
        // },
        //邀请码新弹窗
        InvitationCodeBoxShow: false,
        //实名按钮
        RealNameButton: false,
        //是否已认证
        RealNameData: "",
        formData5: {
          field101: "",
          field102: "",
          code: "",
        },
        rules5: {
          field101: [{
            required: true,
            message: "请输入真实姓名",
            trigger: "change",
          }, ],
          code: [{
            required: true,
            message: "请输入验证码",
            trigger: "change",
          }, ],
          field102: [{
              required: true,
              message: "请输入身份证号",
              trigger: "change",
            },
            {
              pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: "格式错误",
              trigger: "change",
            },
            //   {
            //   pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            //   message: '格式错误',
            //   trigger: 'change'
            // }
          ],
        },
        //实名认证
        tanShow1: false,
        //新手机号是否能输入
        showPhone: true,
        // 定时器
        timer: undefined,
        //  获取验证码按钮
        gain: {
          title: "获取验证码",
          flag: false,
        },
        //修改手机号是否显示验证码
        phonenumberCode: false,
        //年月 日
        dateTime: "MONTH",
        //其它收入支出弹
        mouseoverShowText: false,
        //租户ID
        TenantId: "",
        //传递当前路由地址
        uelLocation: "",
        //编辑弹窗
        editShow: false,
        userDatarules: {
          nickName: [{
            required: true,
            message: "请输入用户名称",
            trigger: "blur",
          }, ],
          phonenumber: [{
              required: true,
              message: "请输入手机号码",
              trigger: "blur",
            },
            {
              pattern: /^1(3|4|5|7|8|9)\d{9}$/,
              message: "手机号格式错误",
              trigger: "blur",
            },
          ],
          newPhonenumber: [{
              required: true,
              message: "请输入手机号码",
              trigger: "change",
            },
            {
              pattern: /^1(3|4|5|7|8|9)\d{9}$/,
              message: "手机号格式错误",
              trigger: "change",
            },
          ],
          //  验证码
          code: [{
            required: true,
            message: "验证码不能为空",
            trigger: "change"
          }, ],
        },
        userxx: {},
        //项目列表
        projectOptions: [{
          value: "选项1",
          label: "黄金糕",
        }, ],
        projectParam: "",
        projectDataSummary: false,

        //弹窗
        IndirectShow: false,
        htmlname: "",
        //登陆时间
        LoginTime: "",
        // 左卡片
        CardData: {},
        //所属角色
        roleData: "",
        //二维码
        Invitation: "",
        //二维码链接
        qrcode: "",
        moneyList: [{
            name: "佣金收入",
            // icon: require("@/assets/images/money.png"),
            price: "533.54",
          },
          {
            name: "分成收入",
            // icon: require("@/assets/images/divide.png"),
            price: "80000.00",
          },
        ],
        userData: {
          phonenumber: "",
          createTime: "",
          userName: ""
        },
        userId: "",
        // 页面信息
        pageData: {},
        swing: true,
        chart: null,
        userInfo: {
          img: "./img/header.jpg",
          name: "爱吃鱼的小猫",
          phone: "15735835669",
          email: "ry@163.com",
          role: "普通用户",
          createTime: "2021-01-22 07:27:43",
        },
        activities: [{
            img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639574514&t=061edfc2475a852df49b797e85d3b6ae",
          },
          {
            timestamp: "一小时前",
            title: "人员变更",
            type: "primary",
            content: "百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线",
          },
          {
            timestamp: "2018-04-12 20:46",
            title: "变更",
            type: "warning",
            content: "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
          },
          {
            timestamp: "2018-04-12 20:46",
            title: "再次变更",
            type: "danger",
            content: "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
            tags: [{
                type: "warning",
                content: "提示",
              },
              {
                type: "danger",
                content: "严重",
              },
            ],
          },
          {
            timestamp: "2018-04-12 20:46",
            title: "信息",
            type: "success",
            tags: [{
              type: "primary",
              content: "查看",
            }, ],
            content: "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
          },
          {
            date: "2020",
          },
          {
            timestamp: "2018-04-12 20:46",
            title: "人员变更",
            type: "primary",
            content: "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
          },
          {
            timestamp: "2018-04-12 20:46",
            title: "人员变更",
            type: "primary",
            content: "正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条",
          },
        ],
        dataLine: [],
      };
    },
    components: {
      VueQr,
      userAvatar,
      Dialog
    },
    async created() {
      //获取当前时间
      this.LoginTime = this.moment().format("YYYY-MM-DD HH:mm:ss");
    },
    async mounted() {
		  
      // 获取用户ID
      const res = await getInfo();
      console.log(res, "用户信息222");
      if (res.code == 200 && res.user) {
        this.userxx = res.user;
        sessionStorage.userID = res.user.userId;
        this.userId = res.user.userId - 0;
      }
      //获取是租户还是用户还是平台
      const {
        data
      } = await getIdentityAndTopId();
      console.log(data, "用户信息平台还是租户");
      if (data.topId) {
        this.TenantId = data.topId - 0;
        sessionStorage.TenantId = data.topId;
        //获取团队收入信息
      }
      this.userName = data.identity;
      //获取公告列表
      this.announcementList();

      this.roleData = data.identity;
      sessionStorage.userName = data.identity;
      await this.start();
      this.projectData();
      //初始化图表
      this.$nextTick(() => {
        this.initChart();
      });
      //公告弹窗
      if (data.identity == "用户") {
        this.AddAnnouncement();
      }
      this.drawCharts();
			this.Chart()
    },
    methods: {

		selectchange(val) {
				console.log(val)
        this.dateTime = val;
        this.Chart()
			},
			async changeChart(val) {
        // 总数
          let mun = this.CardData.totalIncome 
        // 佣金
          let ynum = this.CardData.totalCommission
          // 分成
          let fnum = this.CardData.totalProfit
          // 其他
          let qnum = this.CardData.totalOther
				// console.log((val))
				if (val === 2) {
					this.e =Math.floor((qnum/mun)*10000)/100,
						this.tatilcolor = "#FF5800"
            this.bgcolor="#ffecf1"
				} else if (val === 1) {
						this.e =Math.floor((fnum/mun)*10000)/100,
						this.tatilcolor = "#FE4471"
            this.bgcolor="#ffeee5"
				} else {
					this.e =Math.floor((ynum/mun)*10000)/100,
						this.tatilcolor = "#0AA349"
            this.bgcolor="#e6f6ec"
				}
				this.$nextTick(() => {
					this.drawCharts();
				})
			},
			drawCharts() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById("main"));
				let e = this.e
				let col = this.tatilcolor
        let ds = this.bgcolor
				var option = {
					title: {
						show: true,
						text: e + "%",
						x: "center",
						y: "center", // 通过x,y将标题(进度)定位在圆环中心
						textStyle: {
							fontSize: "25",
							color: col,
							fontWeight: "400",
							fontFamily: "DINPro, DINPro-Regular",
						},
					},
					tooltip: {
						trigger: "item",
						formatter: "{d}%",
						show: false,
					},
					legend: {
						orient: "vertical",
						x: "left",
						show: false,
					},
					series: {
						name: "",
						type: "pie",
						radius: ["65%", "85%"],
						avoidLabelOverlap: true,
						hoverAnimation: false,
						label: {
							normal: {
								show: false,
								position: "center",
							},
							emphasis: {
								show: false,
							},
						},
						labelLine: {
							normal: {
								show: false,
							},
						},
						data: [{
								value: e,
								name: "",
								itemStyle: {
									color: col,
								},
							},
							{
								value: 100 - e,
								name: "",
								itemStyle: {
									color: ds,
								},
							},
						],
					},
				};
				myChart.setOption(option);
			},
			async Chart() {
				var chartDom = document.getElementById('tumain');
				var myChart = echarts.init(chartDom);
				
        let param = {
          tenantId: sessionStorage.getItem("TenantId") - 0 || this.userId - 0,
          type: this.dateTime,
          // projectId: this.projectParam,
        };
        const data = await chart(param);
        let typeTime = "";
        console.log(data, "图表");
        if (data.code == 200) {
          if (data.data.length > 0) {
            // 一进来初始化一下
            this.option2.xAxis.data = [];
            this.option2.series[0].data = [];
            if (this.dateTime == "DAY") {
              typeTime = "日";
            } else if (this.dateTime == "MONTH") {
              typeTime = "月";
            } else {
              typeTime = "年";
            }
            data.data.map((item) => {
              this.option2.xAxis.data.push(item.x + typeTime);
              this.option2.series[0].data.push(item.y);
            });
            console.log(this.option2, "---");
          } else {
            this.option2 = {
              color: ["#538AFF"],
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: [0],
              },
              yAxis: {
                // type: "value",
              },
              tooltip: {},
              series: [{
                data: [0],
                type: "line",
                // areaStyle: {},
                smooth: true
              }, ],
            };
          }
        } else {
          this.$message.error(data.msg);
        }


				myChart.setOption(this.option2);
			},
      //帮助中心按钮
      HelpCenter() {
        this.$router.push("/base/help")
        // alert("帮助中心")
      },
      //实名
      // 实名弹窗函数
      handelConfirm5() {
        this.$refs["elForm"].validate((valid) => {
          if (valid) {
            // console.log(this.formData5.field102,'身份证')
            var reg =
              /^(([1][1-5])|([2][1-3])|([3][1-7])|([4][1-6])|([5][0-4])|([6][1-5])|([7][1])|([8][1-2]))\d{4}(([1][9]\d{2})|([2]\d{3}))(([0][1-9])|([1][0-2]))(([0][1-9])|([1-2][0-9])|([3][0-1]))\d{3}[0-9xX]$/;
            console.log(reg.test(this.formData5.field102), "身份证222");
            if (!reg.test(this.formData5.field102)) {
              this.$message({
                message: "请输入正确的身份证号",
                type: "warning",
              });
            } else {
              let param = {
                realname: this.formData5.field101, //真实姓名
                idCard: this.formData5.field102, //身份证号
                one: this.userxx.phonenumber, //手机号
                // one: '17639181867', //手机号
                two: this.formData5.code, //验证码
                uId: this.userId, //id
              };
              console.log(this.formData5, "实名按钮");
              frontUpdateRUser(param).then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "实名成功！",
                  });
                  this.start();
                  this.tanShow1 = false;
                } else {
                  this.$message.error("实名失败！");
                }
              });
            }
          };
          // this.close();
        });
      },
      //实名
      RealNameShow() {
        this.tanShow1 = true;
      },
      // 关闭定时器
      timerFunEnd() {
        this.gain.title = "获取验证码";
        this.gain.flag = false;
        this.showPhone = false;
        clearInterval(this.timer);
      },
      // 定时器
      timerFun() {
        this.gain.flag = true;
        let timerNum = 60;
        this.gain.title = timerNum + "秒后重试";

        this.timer = setInterval(() => {
          timerNum--;
          // console.log(11);
          if (timerNum < 0) {
            this.timerFunEnd();
          } else {
            this.gain.title = timerNum + "秒后重试";
          }
        }, 1000);
      },
      // 发送短信验证码
      async sendCodeFun(el) {
        this.showPhone = false;
        // console.log(this.userxx.phonenumber);
        this.timerFun();
        // console.log(this[el].phoneNumber);
        let param = {
          phone: this.userxx.phonenumber,
          // phone: '17639181867',
          url: this.Invitation,
        };
        const data2 = await getAliDy(param);
        console.log(data2, "222222222");
        if (data2.code == 200) {
          this.sendCodeFlag = true;
        } else {
          this.$message.error(data2.msg);
        }
      },
      //手机号码的修改按钮
      editPhonenumber(row) {
        this.phonenumberCode = row;
      },
      //年月日按钮
      dateTimeBotton(row) {
        this.dateTime = row;
        this.echarBotton();
      },
      // async echarBotton() {
      //   // console.log(this.projectParam, "项目ID000000000000");
      //   //  DAY日   MONTH月   YEAR年
      //   let param = {
      //     tenantId: sessionStorage.getItem("TenantId") - 0 || this.userId - 0,
      //     type: this.dateTime,
      //     // projectId: this.projectParam,
      //   };
      //   const data = await chart(param);
      //   let typeTime = "";
      //   console.log(data, "图表");
      //   if (data.code == 200) {
      //     if (data.data.length > 0) {
      //       // 一进来初始化一下
      //       this.option.xAxis.data = [];
      //       this.option.series[0].data = [];
      //       if (this.dateTime == "DAY") {
      //         typeTime = "日";
      //       } else if (this.dateTime == "MONTH") {
      //         typeTime = "月";
      //       } else {
      //         typeTime = "年";
      //       }
      //       data.data.map((item) => {
      //         this.option.xAxis.data.push(item.x + typeTime);
      //         this.option.series[0].data.push(item.y);
      //       });
      //       // console.log(this.option, "---");
      //     } else {
      //       this.option = {
      //         color: ["#538AFF"],
      //         xAxis: {
      //           type: "category",
      //           boundaryGap: false,
      //           data: [0],
      //         },
      //         yAxis: {
      //           // type: "value",
      //         },
      //         tooltip: {},
      //         series: [{
      //           data: [0],
      //           type: "line",
      //           areaStyle: {},
      //           smooth: true,
      //         }, ],
      //       };
      //     }
      //   } else {
      //     this.$message.error(data.msg);
      //   }
      // },
      //鼠标移入其他收入或其它支出
      mouseoverShow() {
        this.mouseoverShowText = true;
      },
      mouseoutShow() {
        this.mouseoverShowText = false;
      },
      //右侧公告栏
      async announcementList() {
        let param = {
          pageSize: 100,
          pageNum: 1,
          userId: sessionStorage.getItem("TenantId") - 0 || this.userId,
        };
        const data = await getMenuList(param);
        console.log(data, "公告列表");
        //四个颜色
        // primary danger warning success
        let color = [{
            name: "success"
          },
          {
            name: "primary"
          },
          {
            name: "warning"
          },
          {
            name: "danger"
          },
        ];
        if (data.code == 200 && data.data.list.length > 0) {
          let index2 = 0;
          data.data.list.forEach((item, index) => {
            index2++;
            if (index2 == color.length) {
              index2 = 0;
            }
            item.type = color[index2].name;
            // 前面小圆点的颜色
            // if(item.state=='PC'){
            //       item.type="primary"
            // }else{
            //      item.type="success"
            // }
          });

          let tt = [{
            img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201712%2F15%2F20171215221023_KiYWM.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639574514&t=061edfc2475a852df49b797e85d3b6ae",
          }, ];
          let param = tt.concat(data.data.list);
          console.log(param, "666");
          this.$nextTick(() => {
            param[1].tags = [{
                  type: "warning",
                  content: "提示",
                },
                {
                  type: "danger",
                  content: "严重",
                },
              ],
              param[2].tags = [{
                type: "primary",
                content: "查看",
              }, ],
              this.activities = param;
            console.log(this.activities, '99999')
          });
        }
      },
      //编辑弹窗取消函数
      editFalse() {
        this.editShow = false;
        this.start();
      },
      //修改手机号
      editNewPhonenumber() {
        this.$refs["userxx"].validate(async (valid) => {
          if (valid) {
            let param = {};
            if (this.phonenumberCode) {
              param = {
                invitationCode: this.userxx.code, //验证码
                phonenumber: this.userxx.phonenumber, //旧手机号
                remark: this.userxx.newPhonenumber, //新手机号
                userId: this.userId - 0, //用户ID
              };
              // console.log(this.userxx,'888999')
              updatePhoneByUserId(param).then((response) => {
                if (response.code == 200) {
                  this.msgSuccess("修改成功,请再次登录!");
                  this.editShow = false;
                  this.start();
                } else {
                  this.$message.error("提交失败");
                }
              });
            } else {
              param = {
                nickName: this.userxx.nickName, //用户昵称
                userId: this.userId, //用户ID
                phonenumber: this.userxx.phonenumber //手机号
              };
              console.log(param, '555')

              //更改用户名称
              updateUserProfile(param).then((res) => {
                if (res.code == 200) {
                  this.msgSuccess("修改成功!");
                  this.editShow = false;
                  this.start();
                } else {
                  this.$message.error('操作失败!');
                }
              });
            }

          }
        });
      },

      //获取项目列表
      async projectData() {
        if (this.roleData == "租户") {
          let param = {
            pageSize: 100,
            pageNum: 1,
          };

          const data = await listAPI(param);
          console.log(data, "获取项目列表66666699999");

          if (data.code == 200) {
            if (data.data.list.length > 0) {
              this.projectOptions = data.data.list;
              this.projectParam = data.data.list[0].proId;
            }
          } else {
            this.$message.error(data.msg);
          }
        } else {
          const userData = await proUserList(param);
          if (userData.code == 200) {
            if (userData.data.list.length > 0) {
              this.projectOptions = userData.data.list;
              this.projectParam = data.data.list[0].proId;
            }
          } else {
            this.$message.error(userData.msg);
          }
        }
        this.Chart("DAY");
      },

      async AddAnnouncement() {
        //获取余额
        const balance = await selectCapUserWalletById({
          userId: this.userId
        }); //获取账户余额
        console.log(balance, "当前账户余额");
        if (balance.code == 200) {
          this.CardData.balance = balance.data.balance;
        } else {
          this.$message.error(balance.msg);
        }
        //传递子组件当前的路由；然后调用子组件的事件函数
        this.uelLocation = window.location.pathname.slice(1);
        this.$refs.mychild.gitData();
      },
      withdrawBotton() {
        if (this.userName == "用户") {
          this.$router.push("/finance/userManage/AccountIndex");
        }
      },
      //编辑按钮
      editButton() {
        this.editShow = true;
        // this.userxx.phonenumber=this.userData.phonenumber;
        // this.userxx.userName=this.userData.userName;
        // this.$router.push("/user/profile");
      },
      InvitationButton() {
        this.IndirectShow = true;
      },
      // 初始化图表
      async initChart() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("tumain"));

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(this.option2);
      },
      async start() {
        console.log(this.roleData)
        // 获取用户ID
        const res = await getInfo();
        console.log(res, "用户信息222");
        if (res.code == 200 && res.user) {
          this.userxx = res.user;
          sessionStorage.userID = res.user.userId;

          sessionStorage.userData = JSON.stringify(res.user);
          this.userId = res.user.userId - 0;
        }

        // 获取卡片
        // 右卡片
        const {
          data
        } = await selectByTeamSum({
          userId: this.userId
        });
        console.log(data, "右卡片");

        this.pageData = data;

        let param = {};
        
        //
        if (this.roleData == "用户") {
          param = {
            tenantId: this.TenantId - 0, //租户ID
            toUserId: res.user.userId - 0, //用户id
          };
        } else {
          param = {
            fromUserId: res.user.userId - 0, //用户id
            tenantId: res.user.userId - 0, //租户ID
          };
        }
        // toUserId: this.userId, //用户id
        const card = await capPoolAccountRecordStatistics(param);
        console.log(card, "6677-------------");
        if (card.code == 200) {
          this.CardData.totalOther = card.data.otherAmount - 0; //其他总收入
          this.CardData.totalProfit = card.data.profitAmount; //分润总收入
          this.CardData.totalCommission = card.data.comnissionAmount - 0; //佣金总收入
          this.CardData.totalIncome = card.data.totalAmount - 0; //总支出总收入
          this.e =Math.floor((card.data.comnissionAmount/card.data.totalAmount)*10000)/100
          console.log(this.e)
        }

        //获取邀请码
        const yqm = await selectByInvitationCodeIsUserId();
        // console.log(yqm, "获取邀请码");
        if (yqm.code == 200) {
          this.Invitation = yqm.msg;
          // this.qrcode = `http://192.168.31.130/login?redirect=%2Findex&yqm=${yqm.msg}&judge=2`;
          this.qrcode = `http://av.91weiduan.cn/login?redirect=%2Findex&yqm=${yqm.msg}&judge=2`;
        }

        // Y76glH
        const pz = await selectUserIdByConfig();
        console.log(pz, "获取基础设置++");
        if (pz.code == 200 && pz.data) {
          this.htmlname = pz.data.appName;
          this.imgNameData = pz.data.appLogoUrl;
          //保存到临时存储本地
          sessionStorage.setupParam = JSON.stringify(pz.data);
        } else {
          this.$message.error(szData.msg);
        };

        // const pz = await getSetup();
        // console.log(pz, "获取基础设置++");
        // if (pz.code == 200 && pz.data) {
        //   this.htmlname = pz.data.appName;
        //   //保存到临时存储本地
        //   sessionStorage.setupParam = JSON.stringify(pz.data);
        // }

        //查询是否实名认证
        const userRealName = await selectByTeamUserByOne();

        if (userRealName.code == 200) {
          //1是未实名  0是已实名
          this.RealNameData = userRealName.data.state;
          console.log(userRealName, "用户信息2");
        } else {
          this.$message.error(userRealName.msg);
        }

        // //获取用户个人信息
        // const userParma = await getUserProfile();
        // console.log(userParma.data, "用户信息/////////");
      },
    },
    // watch: {
    //   option: {
    //     handler: function(nVal, oVal) {
    //       if (this.chart) {
    //         if (nVal) {
    //           this.myChart.setOption(nVal);
    //         } else {
    //           this.myChart.setOption(oVal);
    //         }
    //       } else {
    //         this.initChart();
    //       }
    //     },
    //     deep: true,
    //   },
    // },
  };
</script>

<style  lang="scss" scoped>
.xiantiao{
  display: flex;
  flex-direction: column;
  width: 83%;
	// align-items:center;
	height: 80px;
  border-right:var(--color);
  // margin-left:15px;
  }
    .button-notice{
      // box-shadow: 0px 2px 3px 0px rgba(250, 178, 68, 0.57);
      border-radius: 14px;
      width:60px;
      height:22px;
      display:flex;
      align-items: center ;
      justify-content: center;
    }
		 .InvitationCodeBox {
    width: 100%;
    height: 100%;
    position: fixed;

    margin: auto;
    left: 0;
    right: 0;
    bottom: 0px;
    background: rgba(77, 77, 77, 0.6);

    .InvitationCodeMiniBox {
      height: 600px;
      width: 500px;
      position: fixed;
      // border:1px solid red;
      top: 0px;
      margin: auto;
      left: 0;
      right: 0;
      bottom: 10px;

      // position: relative;
      // left: 30%;
      // height: 600px;
      // width: 500px;
      // bottom:1000px;
      background: url("../assets/img/yqmbjBox.png") no-repeat center;
      background-size: 20% 20%;
      background-size: contain;

      .InvitationCodeBoxImg {
        border: 1px rgba(206, 206, 206, 0) solid;

        position: absolute;
        left: 155px;
        top: 220px;

        // height: 100%;
        // width:100%;
        .textBox {
          // margin-left:30%;
          // border: 1px red solid;
          padding-right: 10px;
          color: #fff;
          margin-top: 10px;
          font-weight: 100;
        }

        .InvitationButtonBox {
          margin-top: 18px;

          .Button_Box {
            width: 200px;
            height: 50px;
            margin-left: -10px;
            background: rgba(206, 206, 206, 0);
            border: rgba(206, 206, 206, 0);
          }
        }
      }
    }

    // 关闭XX
    .escInvitationCodeBoxImg {
      position: absolute;
      left: 95%;
      top: 20%;
      height: 30px;
      width: 30px;
      // border: 2px #fff solid;
      cursor: pointer;
      border-radius: 50%;

      .imgXX {
        position: relative;
        height: 30px;
        width: 30px;
        left: 10px;
        top: 4px;
        // border: 1px red solid;
        // border: rgba(206, 206, 206, 0);
      }
    }
  }
	/* //公告 */
	.item-left {
		width: 32%;
		height: 50px;
		padding: 20px 20px 20px 0;

	}

	.notice-item {
		display: flex;
		flex-direction: row;
		width: 90%;
		margin: auto;
		height: 125px;
		border-bottom: 1px solid #D4D4D4;
	}

	.info-notice {
		width: 36%;
		height: 966px;
		overflow-y: scroll;
		background-color: #FFFFFF;
		margin-left: 3%;
		overflow: hidden;
	}

	/* 统计图 */
	.tumain {
		/* width: 94%; */
		height:320px;
		padding: 0 20px 20px 20px
		/* border: 1px solid black; */
	}

	.info-tu-bottom {
		margin-top:41px;
		width: 100%;
		height:559px;
		background-color: #FFFFFF;
	}

	.warrp-span>span {
		line-height: 30px;
	}

	.warrp-span {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.warrp {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: center;
	}

	.tatil-index {
		border-bottom: 1px solid #cfcccc;
	}

	.team-main {
		width: 100%;
		height: 100%;
		border-left: 1px dashed #D4D4D4;
	}

	.team {
		width: 50%;
		/* height: 80%; */
		padding: 0px 0 20px;
		background-color: #fafafa;
    border-radius: 0 5px 5px 0;
	}

	.box-main {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
    margin:10px;
	}

	.box-top {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.capital-bottombox {
		display: flex;
		flex-direction: column;
	}

	.capital-bottom {
		width: 100%;
		height: 23%;
		margin-top: 1rem;
		/* background-color: #005500; */
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.expenditure {
		width: 50%;
		height: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tu {
		margin-left: 0;
		width: 50%;
		height: 200px;
	}

	.capital-center {
		margin-top: 1.8rem;
		width: 100%;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.capital {
		width: 50%;
		height: 280;
		padding: 0px 0 20px;
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
    border-radius: 5px  0  0 5px;
		/* border-right:1px dashed #000000; */
	}

	.info-tu-top {
		width: 100%;
		height: 465px;
		display: flex;
	}

	.info-right-left {
		width: 59%;
		/* height: 300px; */
		display: flex;
		flex-direction: column;
	}

	/*  */

	.info-right-main {
		width: 100%;
		height: 85%;
		display: flex;
		flex-direction: row;
	}

	.info-right {
		width: 80%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.info-right-top {
		width: 100%;
		height: 200px;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background-color: #ffff7f; */
	}

	.dashboard-editor-container {
		/* padding: 20px; */
		background-color: rgb(255, 255, 255);
		position: relative;
		height: 100%;
		width: 100%;
		overflow-y: scroll;
	}

	.back {
		height: 325px;
		// padding:20px;
    width:98%;
    margin:auto;
    background-image:url('../assets/info/矩形 2 拷贝 6@2x.png');
		border-radius: 5px;
		display: flex;
	}

	.info {
		height: 100%;
		border-radius: 5px;
		display: flex;
		position: relative;
		top: -325px
	}

	.left {
		width: 20%;
		height: 100%;

	}

	.list-img {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.b1 {
		margin-right: 20px;
	}

	.RealName {
		display: flex;
		flex-direction: row;
    border-bottom:1px solid #FF3E35;
    color:#FF3E35
	}

	.list-main {
		display: flex;
		flex-direction: column;
	}

	.user-state {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
